<!DOCTYPE html>
<html lang="en" data-vue="vmIndex">
<head>
    <meta charset="UTF-8">
    <title data-localize="pages.index.head.title"></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="Description" data-localize="pages.index.head.desc" content="">
    <meta name="Keywords" data-localize="pages.index.head.keywords" content="">
    <link href="res/images/cont/favicon.ico" rel="shortcut icon">

    <link rel="stylesheet" href="res/css/all-common.css">
    <link rel="stylesheet" href="res/css/index.css">

    <!--html font size set-->
    <script src="res/js/set-font-size.js"></script>


    <!--js common start-->
    <script src="res/lib/jquery/jquery.min.js"></script>
    <script src="res/lib/jquery/jquery-localize/jquery.localize.js"></script>
    <script src="res/lib/store/store-json2.min.js"></script>
    <script src="res/lib/vue/vue.min.js"></script>
    <script src="res/lib/moment/moment.min.js"></script>
    <script src="res/lib/moment/moment-locales.min.js"></script>
    <script src="res/js/common.js"></script>
    <!--js common end-->

</head>
<body>
<header class="p-clear-fix">
    <p class="lang" id="langBox">
        <a href="javascript:void(0);" data-lang="zh-TW">繁体中文</a> /
        <a href="javascript:void(0);" data-lang="zh-CN">简体中文</a> /
        <a href="javascript:void(0);" data-lang="en">English</a>
    </p>

    <h1>
        <a href="/index.html" title="Logo" class="flex-abs-mid"><img src="res/images/cont/index/logo.png"/></a>
    </h1>

    <!--    <div class="login">
            <a href="#">
                <img src="res/images/cont/index/login-2.png" />
            </a>


            <p class="login-btn hide">
                <a href="#" class="p-btn-round">登陆</a>
                <a href="#">注册</a>
            </p>

            <p class="user-info ">
                <a href="#"><img src="res/images/cont/index/user-male.png" /></a>
                <a href="#" class="name">Aaron.Ming Aaron.Ming</a>
                <a href="#" class="p-btn-round">退出</a>
            </p>


        </div>-->
</header>
<!--main nav-->
<nav class="p-clear-fix">
    <ul class="p-clear-fix" id="mainNav">
        <li data-name="index"><a href="index.html" data-localize="nav.news"></a></li>
        <li data-name="points"><a href="points.html" data-localize="nav.points"></a></li>
        <li data-name="matches"><a href="matches.html" data-localize="nav.matches"></a></li>
        <li data-name="rating"><a href="rating.html" data-localize="nav.rating"></a></li>
    </ul>
</nav>
<section class="area">
    <ul id="regionArea">
        <li data-val="50" class="cur"><img src="res/images/cont/location/location-global.png" class="global-img"> <span>Global</span>
        </li>
        <li data-val="45"><img src="res/images/cont/location/location-lck.png"> <span>LCK</span></li>
        <li data-val="44"><img src="res/images/cont/location/location-lcseu.png"> <span>EULCS</span></li>
        <li data-val="41"><img src="res/images/cont/location/location-lpl.png"> <span>LPL</span></li>
        <li data-val="43"><img src="res/images/cont/location/location-lcsna.png"> <span>NALCS</span></li>
        <li data-val="42"><img src="res/images/cont/location/location-lms.png"> <span>LMS</span></li>
    </ul>
</section>

<!-- tab -->
<div class="p-tab news">
    <ul class="p-tab-h p-clear-fix" id="newsType">
        <li class="cur" data-view="focus"><span data-localize="pages.index.tab.focus"></span></li>
        <li data-view="transfer"><span data-localize="pages.index.tab.transfer"></span></li>
        <li data-view="headlines"><span data-localize="pages.index.tab.headlines"></span></li>
    </ul>
    <div class="p-tab-c">
        <div class="p-tab-item ">
            <!--新闻幻灯片-->
            <div class="swiper-container news-hdp" id="newsHdp">
                <div class="swiper-wrapper">
                    <template v-for="item in list">
                        <div class="swiper-slide">
                            <a href="news-detail.html?id={{item.Id}}" class="p-img-abs">
                                <img src="{{item.ImgSrc}}">
                                <div class="title"><span>{{item.Title}}</span></div>
                            </a>
                        </div>
                    </template>
                </div>
            </div>
            <div class="swiper-pagination"></div>


            <!--热门新闻-->
            <section class="news-list" id="newsFocus">
                <template v-for="item in list | orderBy 'Date' -1 ">
                    <div class="news-item p-clear-fix">
                        <a href="news-detail.html?id={{item.Id}}" class="p-clear-fix">
                            <div class="img-box">
                                <img src="{{item.ImgSrc}}">
                            </div>

                            <div class="info-box">
                                <h3>{{item.Title}}</h3>
                                <div class="desc-box p-clear-fix">
                                    <div class="l" v-bind:class="{
                         'color-location-NA': item.Area=='NA',
                         'color-location-CN': item.Area=='CN',
                         'color-location-KR': item.Area=='KR',
                         'color-location-TW': item.Area=='TW',
                          'color-location-EU':  item.Area=='EU' }"><span>{{item.Area}}</span></div>
                                    <div class="r">{{item.Date | formatDate}}</div>
                                </div>
                            </div>
                        </a>
                    </div>
                </template>

                <div class="load-more">
                    <div class="load-wrap">
                        <div class="loader">
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                        </div>
                        <div class="loader-text" data-localize="load.text"></div>
                    </div>
                    <div class="none-data" data-localize="load.noText"></div>
                    <div class="load-fail" data-localize="load.failText"></div>
                </div>
            </section>
        </div>
        <div class="p-tab-item hide">
            <!--转会名单-->
            <section class="transfer" id="newsTransfer">
                <div class="but">2016/05/12 星期五</div>
                <ul>
                    <li class="p-clear-fix">
                        <div class="col col-1">
                            <div class="img-box"><img
                                    src="http://cdn.esportsmatrix.com/Content/images/uploaded/player/c23c4d29-f19e-4f35-b2d8-4bccb79dcd09.jpg"
                                    alt="name"></div>
                        </div>
                        <div class="col col-2">
                            <div class="past">
                                <div class="p-clear-fix">
                                    <span class="team-name">中单</span>
                                    <span class="pn-name"><img src="res/images/cont/replay/hz.png"> Vici Gaming</span>
                                </div>
                                <span class="tag"><span class="p-green">转入</span></span>
                            </div>
                            <div class="past">
                                <div class="p-clear-fix">
                                    <span class="team-name  p-blue">中单</span>
                                    <span class="pn-name  p-white-dark "><img src="res/images/cont/replay/hz.png"> Vici Gaming</span>
                                </div>
                                <span class="tag"><span class="p-red">离开</span></span>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="but">2016/05/12 星期五</div>
                <ul>
                    <li class="p-clear-fix">
                        <div class="col col-1">
                            <div class="img-box"><img
                                    src="http://cdn.esportsmatrix.com/Content/images/uploaded/player/c23c4d29-f19e-4f35-b2d8-4bccb79dcd09.jpg"
                                    alt="name"></div>
                        </div>
                        <div class="col col-2">
                            <div class="past">
                                <div class="p-clear-fix">
                                    <span class="team-name">中单</span>
                                    <span class="pn-name"><img src="res/images/cont/replay/hz.png"> Vici Gaming</span>
                                </div>
                                <span class="tag"><span class="p-green">转入</span></span>
                            </div>
                            <div class="past">
                                <div class="p-clear-fix">
                                    <span class="team-name  p-blue">中单</span>
                                    <span class="pn-name  p-white-dark "><img src="res/images/cont/replay/hz.png"> Vici Gaming</span>
                                </div>
                                <span class="tag"><span class="p-red">离开</span></span>
                            </div>
                        </div>
                    </li>
                </ul>
            </section>

        </div>
        <div class="p-tab-item hide">
            <!--头条热话-->
            <section class="headlines" id="newsHeadlines">
                <ul class=" data-li-table data-b-bottom">

                    <template v-for="item in list | orderBy 'Date' -1 ">
                        <li>
                            <div class="col col-1"><img src="{{item.TeamSrc}}"></div>
                            <div class="col col-2">
                                <p>{{item.Title}}</p>
                                <p class="date p-text-hide">{{item.Date | formatDate}}</p>
                            </div>
                        </li>
                    </template>


                </ul>
                <div class="load-more">
                    <div class="load-wrap">
                        <div class="loader">
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                        </div>
                        <div class="loader-text" data-localize="load.text"></div>
                    </div>
                    <div class="none-data" data-localize="load.noText"></div>
                    <div class="load-fail" data-localize="load.failText"></div>
                </div>

            </section>

        </div>
    </div>
</div>

<!--footer-->
<footer id="footer">
    <p>©T.E.C.H.Ltd</p>
</footer>

<!--swiper-->
<script src="res/lib/swiper/swiper.jquery.min.js"></script>
<script src="res/js/index.js"></script>
</body>
</html>